<template>
  <div class="avatar-wrap">
    <nut-avatar class="avatar" size="large">
      <img
        :src="
          userDetail.avatar
            ? getFileHttpUrl(userDetail.avatar)
            : 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png'
        "
        alt=""
      />
    </nut-avatar>
    <div class="member-detail">
      <p class="nickname">
        {{ userDetail.nickname }}
        <van-button v-if="showButton" shape="square" size="small" type="default" @click="goLogin"> 去登录 </van-button>
      </p>
    </div>
  </div>
  <div class="info-style">
    <van-cell-group>
      <van-cell title="介绍" :label="userDetail.introduce" />
      <van-cell title="地区" :label="userDetail.address" />
    </van-cell-group>
    <van-cell-group class="sex-age">
      <van-cell :title="'性别:' + genderMap[userDetail.sex]" :value="'年龄:' + userDetail.age" class="age-style" />
    </van-cell-group>
  </div>
  <van-grid class="grid-style">
    <van-grid-item icon="user-o" text="我的资料" @click="router.push({ path: '/personalData' })" />
    <van-grid-item icon="star-o" text="收藏" @click="router.push({ path: '/collection' })" />
    <van-grid-item icon="like-o" text="点赞" @click="router.push({ path: '/like' })" />
    <van-grid-item icon="records-o" text="作品" @click="router.push({ path: '/works' })" />
  </van-grid>
  <div class="system-style">
    <van-cell-group>
      <van-cell v-if="!showButton" is-link title="退出登录" value="点击退出" @click="logoutClick" />
    </van-cell-group>
  </div>
</template>

<script lang="ts" setup name="MemberPage">
  // import { useUserStore } from '@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { userInfo } from '@/api/user';
  import { genderMap } from '@/enums/userUpdateEnum';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import { showConfirmDialog, showFailToast } from 'vant';
  import { message } from 'ant-design-vue';

  const router = useRouter();
  const userStore = useUserStore();
  const showButton = ref(true);
  const userDetail = ref<{
    nickname: string;
    email: string;
    avatar: string;
    mobile: string;
    sex: number | string;
    age: number | string;
    introduce: string;
    address: string;
    lastTime: number;
  }>({
    nickname: '',
    email: '',
    avatar: '',
    mobile: '',
    sex: 3,
    age: '无',
    introduce: '',
    address: '',
    lastTime: 0,
  });
  // 创建一个重置方法
  const resetUserDetail = () => {
    userDetail.value = {
      nickname: '',
      email: '',
      avatar: '',
      mobile: '',
      sex: 0,
      age: '无',
      introduce: '',
      address: '',
      lastTime: 0,
    };
  };
  const isLogin = () => {
    const token = userStore.getToken;
    if (!token) {
      showFailToast('未登录，请重新登录');
      setTimeout(() => {
        router.push('/login');
      }, 1000); // 1000 毫秒后跳转
      // router.push('/login');
    } else {
      getUserInfo();
    }
  };
  const getUserInfo = async () => {
    const res = await userInfo();
    console.info('请求信息===>', res);
    if (res) {
      userDetail.value.nickname = res.data.nickname;
      userDetail.value.email = res.data.email;
      userDetail.value.avatar = res.data.avatar;
      userDetail.value.mobile = res.data.mobile;
      userDetail.value.sex = res.data.sex;
      userDetail.value.age = res.data.age || '未知';
      userDetail.value.introduce = res.data.introduce || '此人很懒没有填写介绍信息！';
      userDetail.value.address = res.data.address || '暂未填写';
      userDetail.value.lastTime = res.data.lastTime;
      showButton.value = false;
    }
  };
  const goLogin = () => {
    router.push('/login');
  };
  /**
   * 退出登录
   */
  const logoutClick = async () => {
    showConfirmDialog({
      title: '确定',
      message: '您确认退出登录吗？',
      showCancelButton: true,
      allowHtml: false,
    })
      .then(async () => {
        // on confirm
        console.info('确认');
        const res = await userStore.logout();
        if (res) {
          resetUserDetail();
          showButton.value = true;
          message.success(res?.msg);
        }
      })
      .catch(() => {
        // on cancel
        console.info('取消');
      });
  };
  onMounted(() => {
    isLogin();
    // getUserInfo();
  });
</script>

<style lang="scss">
  .avatar-wrap {
    display: flex;
    margin: 10px 40px;
    align-items: center;
    .member-detail {
      margin-left: 20px;
      .nickname {
        font-size: 25px;
        font-weight: bold;
        .nut-button {
          margin-left: 10px;
        }
      }
      .info {
        margin-top: 10px;
        font-size: 16px;
      }
    }
  }
  .info-style {
    padding-top: 20px;
    .sex-age {
      .age-style.van-cell > .van-cell__value {
        color: #000303 !important;
      }
    }
  }
  .grid-style {
    padding-top: 20px;
  }
  .system-style {
    padding-top: 20px;
  }
</style>
